<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../../css/mypetstore.css" type="text/css" media="screen"/>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<div th:replace="jsp/common/top"></div>

<div id="Content">
    <div id="BackLink">
        <a href="/catalog/view">Return to Main Menu</a>
    </div>

<!--    <div id="Catalog">-->



    <div id="Cart">

        <span th:if="${session.items!=null}">
            <p style="color: red">
                商品
                <span th:each="item:${session.items}">
                    <a th:href="@{/catalog/viewItem(itemId=${item.itemid})}" th:text="${item.itemid}"></a>
                </span>
                库存不足
            </p>
        </span>

        <h2>Shopping Cart</h2>
        <form action="updateCart" method="post">
            <table>
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>
                <!-- 商品行 -->
                <tr th:each="item : ${allCartItems}">
                    <td th:text="${item.itemId}">Item ID</td>
                    <td th:text="${item.item.getProductid()}">Product ID</td>
                    <td th:text="${item.item.getdees}">Description</td>
                    <td th:text="${item.inStock}">In Stock?</td>
                    <!--                    <td th:text="${item.quantity}">Quantity</td>-->
                    <!--                    <td><input type="number" value="${item.quantity}" onchange="updateQuantity(this, ${item.itemId})"></td>-->
                    <!--                    <td><input type="number" th:field="*{item.quantity}" onblur="updateQuantity(this, ${item.itemId})"></td>-->
                    <td>
                        <input type="number" th:value="${item.quantity}"
                               th:attr="data-item-id=${item.itemId}"
                               onblur="updateQuantity(this)">
                    </td>
                    <td th:text="${item.item.getListprice()}">List Price</td>
                    <td th:text="${item.total}">List Price</td>
                    <td>
                        <a th:href="'http://localhost:8080/removeCartItem?itemid='+${item.itemId}">删除</a>
<!--                        <a th:href="'/cart/removeCartItem?itemid='+${item.itemId}">删除</a>-->
                    </td>
                </tr>
            </table>
<!--            <span class="cart-link">-->
<!--            <a th:href="@{http://localhost:8080/clearCart}">Clear Cart</a>-->
<!--&lt;!&ndash;            <a th:href="@{/cart/clearCart}">Clear Cart</a>&ndash;&gt;-->
<!--            </span>-->
        </form>
        <span class="cart-link">
            <a th:href="@{http://localhost:8080/clearCart}">Clear Cart</a>
            <!--            <a th:href="@{/cart/clearCart}">Clear Cart</a>-->
            </span>
        <span class="cart-link">
        <a th:if="${numOfItems>0}" th:href="@{/order/newOrder}">Procceed To Checkout</a>
            </span>
    </div>
<!--    </div>-->

<!--    <c:if test="${sessionScope.cart.numberOfItems > 0}">-->
<!--        <a href="newOrderForm" class="Button">Proceed to Checkout</a>-->
<!--    </c:if>-->
<!--</div>-->

<!--<div id="MyList">-->
<!--    <span th:if="${session.loginAccount != null}">-->
<!--        <span th:if="${!empty session.loginProfile.getMylistopt()}">-->
<!--            <div th:replace="jsp/cart/includeMyList"></div>-->
<!--        </span>-->
<!--    </span>-->
<!--</div>-->

<div id="Separator">&nbsp;</div>

</div>
<div th:replace="jsp/common/bottom"></div>
</body>

<script>
    function updateQuantity(input) {
        const quantity = input.value;
        const itemId = input.getAttribute('data-item-id')
        $.ajax({
            type: "POST",
            url: "/updateCart",
            data: {
                quantity: quantity,
                itemId: itemId
            },
            success: function (data) {
                // 处理后端返回的数据
                console.log("Update successful");
                location.reload()
            },
            error: function (xhr, status, error) {
                console.error("Update failed");
            }
        });
    }

</script>
</html>